{%block body%}
<script src="/static/jquery.form.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
  	$('#formEditChat').validate({
		rules:{
			'scontent': 'required'
		}
		,
		submitHandler: function(form) {
			$('#SendChat').attr('disabled','disabled');
			$('#formEditChat').ajaxSubmit({
				success:   showResponse,
				url:       '/vchat/add',
				type:      'post',
				timeout:   5000   
			});
		}	
	});
	function showResponse(data,status)  {
		$('#SendChat').attr('disabled','');		
		if(data=='ok')
		{
			updateChat();
			$('#scontent').val('');
		}
		if(data=='login')
			window.location="{{sign_in}}";

	}
	{%if not user %}
	$('#SendChat').val('Login by gmail');
	$('#SendChat').click(function(){
		window.location="{{sign_in}}";
	});
	$('#scontent').attr('disabled','disabled');
	{%endif%}
	setup();
	/*$('#reload').change()
	{
		var value = $('#reload').val();
		if(value > 0 )
			window.location="/user/vchat?reload="+value;
	}*/
});
function updateChat() {
	var minDate = $('#minDate').val();
	$.get("/vchat/list_ajax",{minDate: minDate}, function(data){
			$("#chats").prepend(data);
		});	
}
function setup() {
	window.setInterval("updateChat()", (600*1000));
	updateChat();
}
function ChangeReload()
{
	var value = $('#reload').val();
	if(value > 0 )
		window.location="/vchat?reload="+value;
}
</script>
<div class="widget Label" id="Label1">
<h2>Chat chít</h2>
	<div class="widget-content list-label-widget-content" style=" padding:10px 0px 1px 0px;">
		<form name="formEditChat" id="formEditChat" action="" method="post">
		<input type="hidden" name="minDate" id="minDate" value="{{minDate}}" />
		<table border="0" cellpadding="0" cellspacing="0" style="width:100%">
		<tr>
			<td><textarea name="scontent" id="scontent" style="width:90%"></textarea></td>
		</tr>
		<tr><td><input type="submit" value="Send" id="SendChat"></td></tr>
		<tr height="10"></tr>
		<tr>
			<td valign="top" bordercolor="#B0B0B0">
			<div id="chats" style=" padding:2px; height:250px;overflow:auto;border-collapse:collapse; border:solid 1px" >
			<div>
			</td>
		</tr>
		</table>
		</form>
		
	</div>
</div>


{%endblock%}